<div th:fragment="jcms-upload-outsideLink">
	<!-- 处理对外链接资源弹窗的操作 -->
	<div id="jcms-upload-outsideLink-dlg" class="easyui-dialog" title="新增外链接图片" style="width: 620px; height: 482px;"
		data-options="closed:true,modal:true,border:'thin',buttons:'#jcms-upload-outsideLink-dlg-buttons'">
		<form id="jcms-upload-outsideLink-fm" method="post" novalidate style="margin: 0; padding: 20px 50px">
			<div style="display: none;">
				<input id="jcms-upload-outsideLink-id" name="id" class="easyui-textbox" style="width: 100%">
			</div>
			<div style="margin-bottom: 10px">
				<input id="jcms-upload-outsideLink-link" name="link" class="easyui-textbox" required="true" labelAlign="right" label="外链地址" data-options="validType:'minLength[5]'"
					style="width: 90%">
			</div>
			<div style="margin-bottom: 10px">
				<input id="jcms-upload-outsideLink-original_filename" name="original_filename" class="easyui-textbox" required="true" labelAlign="right" label="资源名称" style="width: 80%">
			</div>
			<div style="margin-bottom: 10px">
				<input id="jcms-upload-outsideLink-label_id" name="label_id" value="0">
			</div>
			<div class="image-box"
				style="margin-bottom: 10px; padding: 8px; border: 1px solid #e5e5e5; min-height: 200px; display: flex; justify-content: center; align-items: center;">
				<img onerror="javascript:this.src='/assets/backend/image/error.jpg';" src="" style="max-height: 215px; max-width: 500px;" alt="">
			</div>
		</form>
	</div>
	<div id="jcms-upload-outsideLink-dlg-buttons" style="display: none;">
		<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" id="jcms-upload-outsideLink-saveOutsiteLink" style="width: 90px"> 保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#jcms-upload-outsideLink-dlg').dialog('close')" style="width: 90px">关闭</a>
	</div>
	<script type="text/javascript" th:inline="javascript">
		/*<![CDATA[*/
		$(function() {
			// 事件
			$('#jcms-upload-outsideLink-link').textbox({
				onChange: function(newValue){
					$('#jcms-upload-outsideLink-dlg .image-box').show();
					$('#jcms-upload-outsideLink-dlg .image-box img').attr('src', newValue);
					var name = newValue.substring(newValue.lastIndexOf('/') + 1);
					$('#jcms-upload-outsideLink-original_filename').textbox('setValue', name.substring(0, 200));
				}
			});
			
			// 显示弹窗
			function showDialog(title, data , savecall){
				$('#jcms-upload-outsideLink-id').textbox('setValue', data && data.id ? data.id: '-1');
				$('#jcms-upload-outsideLink-link').textbox('setValue', data && data.link ? data.link: '');
				$('#jcms-upload-outsideLink-original_filename').textbox('setValue', data && data.original_filename ? data.original_filename: '');
				$('#jcms-upload-outsideLink-label_id').combobox('setValue', data && data.label_id ? data.label_id: '0');
				if(data && data.link){
					$('#jcms-upload-outsideLink-dlg .image-box').show();
				}else{
					$('#jcms-upload-outsideLink-dlg .image-box').hide();
				}
				$('#jcms-upload-outsideLink-dlg .image-box img').attr('src', data && data.link ? data.link: '');
				$('#jcms-upload-outsideLink-dlg').dialog('setTitle', title).dialog('center').dialog('open');
				// 点击保存外链接
				$('#jcms-upload-outsideLink-saveOutsiteLink').linkbutton({
					onClick : function() {
						var id = $('#jcms-upload-outsideLink-id').textbox('getValue');
						var link = $('#jcms-upload-outsideLink-link').textbox('getValue');
						var original_filename = $('#jcms-upload-outsideLink-original_filename').textbox('getValue');
						var label_id = $('#jcms-upload-outsideLink-label_id').combobox('getValue');

						var param = {
							id : id,
							link : link,
							originalFilename : original_filename,
							labelId : label_id
						}

						request.jpost({
							url: [[@{/backend/repertory/outsidelink-save.html}]],
							data: param,
							success: function(rsp, data){
								if(data && parseInt(data) === 1){
									$('#jcms-upload-outsideLink-dlg').dialog('close');
								}
							},
							complete: function(){
								savecall()
							}
						});
					}
				});
			}
			
			// 获取并且渲染标签
			function renderLabel(call){
				// 获取资源标签公用方法
				globalData.repertoryLabelInfos(function(labeles) {
					// 处理数据
					var labelComboboxData = [];
					labelComboboxData.push({
						id : 0,
						name : '无'
					});
					if (labeles.rows && labeles.rows.length > 0) {
						for ( var i in labeles.rows) {
							var item = labeles.rows[i];
							labelComboboxData.push({
								id : item.id,
								name : item.name
							});
						}
					}

					// 初始化 添加外链接资源弹窗的 资源标签选择器
					$('#jcms-upload-outsideLink-label_id').combobox({
						width : 220,
						valueField : 'id',
						textField : 'name',
						label : '标签',
						labelAlign : 'right',
						data : labelComboboxData
					});
					
					call();
				});
			}
			
			$.outsideLinkDialog = function(obj){
				var parames = {
					data: null,
					title: '新增外链接图片',
					save: function(){}
				};
				$.extend(parames, obj);
				var data = parames.data;
				renderLabel(function(){
					showDialog(parames.title, parames.data, parames.save);
				});
				
			}
			$.fn.extend({
				outsideLinkDialog : function(obj) {
					var parames = {
						data: null,
						title: '新增外链接图片',
						save: function(){}
					};
					$.extend(parames, obj);
					var data = parames.data;
					var _this = $(this);
					renderLabel(function(){
						// 增加外链接图片点击时间
						_this.linkbutton({
							onClick : function() {
								showDialog(parames.title, parames.data, parames.save);
							}
						});
					});
				}
			});
		});
		/*]]>*/
	</script>
</div>